{% extends 'user/user_base.html' %}
{% load user_tags %}

{% block title %}手机注册{% endblock %}

{% block extra_css %}
<style>
    /* 垂直居中容器 */
    .vc-wrapper {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f5f7fa;   /* 浅灰背景，可删 */
    }
    .card-shadow {
        box-shadow: 0 3px 15px rgba(0,0,0,.12);
        border-radius: 8px;
    }
    /* 让输入组左右圆角保持一致 */
    .input-group-addon {
        border-radius: 0 4px 4px 0;
    }
</style>
{% endblock %}

{% block form %}
<div class="vc-wrapper">
  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-8 col-md-6 col-lg-5 center-block" style="float:none;">
        <div class="panel panel-default card-shadow">
          <div class="panel-heading text-center">
            <h3 class="panel-title">手机号注册</h3>
          </div>
          <div class="panel-body">

            <form method="post" autocomplete="off">
              {% csrf_token %}

              <!-- 手机号 -->
              <div class="form-group {% if form.phone.errors or phone_error %}has-error{% endif %}">
                <label class="control-label" for="{{ form.phone.id_for_label }}">{{ form.phone.label }}</label>
                {{ form.phone|add_class:"form-control input-lg" }}
                {% for e in form.phone.errors %}<p class="help-block">{{ e }}</p>{% endfor %}
                {% if phone_error %}<p class="help-block">{{ phone_error }}</p>{% endif %}
              </div>

              <!-- 验证码 -->
              <div class="form-group {% if form.code.errors %}has-error{% endif %}">
                <label class="control-label" for="{{ form.code.id_for_label }}">{{ form.code.label }}</label>
                <div class="input-group">
                  {{ form.code|add_class:"form-control input-lg" }}
                  <span class="input-group-btn">
                    <button id="send-code-btn" class="btn btn-success btn-lg" type="button">
                      获取验证码
                    </button>
                  </span>
                </div>
                {% for e in form.code.errors %}<p class="help-block">{{ e }}</p>{% endfor %}
              </div>

              <!-- 密码 -->
              <div class="form-group {% if form.password.errors %}has-error{% endif %}">
                <label class="control-label" for="{{ form.password.id_for_label }}">{{ form.password.label }}</label>
                {{ form.password|add_class:"form-control input-lg" }}
                {% for e in form.password.errors %}<p class="help-block">{{ e }}</p>{% endfor %}
              </div>

              <!-- 确认密码 -->
              <div class="form-group {% if form.password2.errors %}has-error{% endif %}">
                <label class="control-label" for="{{ form.password2.id_for_label }}">{{ form.password2.label }}</label>
                {{ form.password2|add_class:"form-control input-lg" }}
                {% for e in form.password2.errors %}<p class="help-block">{{ e }}</p>{% endfor %}
              </div>

              <!-- 注册按钮 -->
              <button type="submit" class="btn btn-primary btn-lg btn-block">注册</button>
            </form>

            <!-- 去登录 -->
            <div class="text-center" style="margin-top:15px;">
              <a href="{% url 'user:login' %}" class="btn btn-link btn-sm">已有账号？去登录</a>
            </div>

          </div><!-- /.panel-body -->
        </div><!-- /.panel -->
      </div><!-- /.col -->
    </div><!-- /.row -->
  </div><!-- /.container -->
</div><!-- /.vc-wrapper -->
{% endblock %}


{% block js %}
$(function(){
    var countdown = 0, timer = null;

    $('#send-code-btn').on('click', function(){
        var $btn  = $(this);
        var phone = $('#id_phone').val();

        if(!phone){alert('请输入手机号'); return;}
        if(!/^1[3-9]\d{9}$/.test(phone)){alert('请输入正确的手机号'); return;}
        if(countdown > 0){return;}

        $.ajax({
            url: '{% url "user:send_verification_code" %}',
            type: 'POST',
            data: {
                phone: phone,
                csrfmiddlewaretoken: '{{ csrf_token }}'
            },
            dataType: 'json',
            success: function(res){
                if(res.success){
                    alert('验证码发送成功');
                    countdown = 60;
                    $btn.prop('disabled', true).text(countdown + '秒后重新获取');
                    timer = setInterval(function(){
                        countdown--;
                        $btn.text(countdown + '秒后重新获取');
                        if(countdown <= 0){
                            clearInterval(timer);
                            $btn.prop('disabled', false).text('获取验证码');
                        }
                    }, 1000);
                }else{
                    alert(res.msg);
                }
            },
            error: function(){
                alert('发送验证码失败，请稍后重试');
            }
        });
    });
});
{% endblock %}
